<template>
    <div class="list-page">
        <div class="list-page-header list-page-header-flex">
            <div class="flex-left">
                <el-input v-model="query.projectName" class="search-input-class" placeholder="项目名称" />
                <el-button type="primary" @click="loadData">查询</el-button>
                <el-button @click="reset">重置</el-button>
            </div>
            <div class="flex-right">
                <!-- <el-input v-model="query.projectName" class="search-input-class" placeholder="项目名称" />
                <el-button type="primary" @click="loadData">查询</el-button>
                <el-button @click="reset">重置</el-button> -->
            </div>
        </div>
        <div class="list-content">
            <el-table
                ref="datagrid"
                :data="table.data"
                border
                @row-click="handleClickTableRow"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="序列号" width="180" show-overflow-tooltip />
                <el-table-column
                    prop="category"
                    label="类型"
                    width="120"
                    :formatter="categoryFmt"
                    show-overflow-tooltip
                />
                <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip />
                <el-table-column prop="priceLimit" label="限价(元)" width="120" show-overflow-tooltip />
                <el-table-column prop="owners" label="业主名称" width="120" show-overflow-tooltip />
                <el-table-column
                    prop="createTime"
                    label="申请日期"
                    :formatter="formatUtil.gridDateFormat"
                    min-width="140"
                />
                <el-table-column prop="stateName" label="状态" width="180" show-overflow-tooltip />
                <el-table-column prop="handlerName" label="当前处理人" width="100" show-overflow-tooltip />
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-button v-if="showSubmit(scope.row)" type="primary" size="small" @click="review(scope.row)">
                            处理
                        </el-button>
                        <!-- <el-popconfirm
                            v-if="showRevoke(scope.row)"
                            title="确认撤回吗？"
                            confirmButtonText="确定"
                            cancelButtonText="再考虑一下"
                            @confirm="flowRevoke(scope.row)"
                        >
                            <template #reference>
                                <el-button type="warning" size="small">撤回</el-button>
                            </template>
                        </el-popconfirm> -->
                        <el-button
                            v-if="showApproval(scope.row)"
                            type="primary"
                            size="small"
                            @click="review(scope.row)"
                        >
                            审核
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="list-footer">
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="table.pagination.currentPage"
                :page-sizes="table.pagination.pageSizes"
                :page-size="table.pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="table.pagination.total"
            ></el-pagination>
        </div>
        <transition name="slide-fade">
            <div v-if="showInfoWindow" class="list-form-modal">
                <BidsForm :id="selectedId" :bidsType="selectedType" @close="closeInfoWindow"></BidsForm>
            </div>
        </transition>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import BidsForm from './form/BidsForm.vue'
import http from '@/http.js'
import formatUtil from '@/utils/format.js'
import flowUtil from '@/utils/flow.js'

const datagrid = ref(null)

const query = reactive({
    projectName: ''
})

const table = reactive({
    data: [],
    selected: [],
    pagination: {
        currentPage: 1,
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        total: 0
    }
})

const selectedId = ref('')
const selectedType = ref('')

const showInfoWindow = ref(false)

const handleSelectionChange = (val) => {
    table.selected = val
}

const handleSizeChange = (val) => {
    table.pagination.pageSize = val
    loadData()
}

const handleCurrentChange = (val) => {
    table.pagination.currentPage = val
    loadData()
}

const handleClickTableRow = (row) => {
    datagrid.value.clearSelection()
    datagrid.value.toggleRowSelection(row)
}

const loadData = () => {
    let params = {
        projectName: query.projectName,
        page: table.pagination.currentPage,
        pageSize: table.pagination.pageSize
    }
    http.fetchForm({
        url: '/jingying/bids/sub_grid',
        data: params
    }).then((res) => {
        table.data = res.data.grid
        table.pagination.total = res.data.total
    })
}

const categoryFmt = (row) => {
    let data = row.category
    if (data === 0) {
        return '技术标'
    } else if (data === 1) {
        return '商务标'
    } else {
        return '未知类型'
    }
}

const reset = () => {
    query.projectName = ''
    loadData()
}

const closeInfoWindow = () => {
    showInfoWindow.value = false
    loadData()
}

const showSubmit = (row) => {
    if (row.state !== 1) {
        return false
    }
    if (row.handler !== localStorage.getItem('username')) {
        return false
    }
    return true
}

// const showRevoke = (row) => {
//     if (row.allowRevoke !== 1) {
//         return false
//     }
//     if (row.handler !== localStorage.getItem('username')) {
//         return false
//     }
//     return true
// }

const showApproval = (row) => {
    if (row.state === 0 || row.state === 1 || row.state === 99) {
        return false
    }
    if (row.handler == null || row.handler == '') {
        return false
    }
    if (row.handler !== localStorage.getItem('username')) {
        return false
    }
    return true
}

// 撤回
const flowRevoke = (row) => {
    flowUtil.doRevoke(row, () => {
        loadData()
    })
}

const review = (row) => {
    selectedId.value = row.id
    selectedType.value = row.flowTypeCode
    showInfoWindow.value = true
}

// mounted
onMounted(() => {
    loadData()
})
</script>
<style scoped>
@import '@/assets/css/list-page.css';
</style>
